<template>
	<div>
		<!-- 面包导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item>订单分类</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片视图 -->
		<el-card>
			<el-row>
				<el-col :span="8">
					<el-input placeholder="请输入内容"><el-button slot="append" icon="el-icon-search"></el-button></el-input>
				</el-col>
			</el-row>
			<!-- 表单 -->
			<el-table :data="orderlist" style="width: 100%" border stripe>
				<el-table-column type="index"></el-table-column>
				<el-table-column prop="order_number" label="订单编号" width="350px"></el-table-column>
				<el-table-column prop="order_price" label="订单价格" width="100px"></el-table-column>
				<el-table-column prop="order_pay" label="是否付款" width="100px">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.order_pay === '1'">已付款</el-tag>
						<el-tag type="danger" v-else>未付款</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="create_time" label="下单时间" width="300px">
					<template slot-scope="scope">
						{{ scope.row.create_time | dataFormat }}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" icon="el-icon-edit" @click="addRessClick"></el-button>
						<el-button type="success" size="mini" icon="el-icon-location" @click="progressClick"></el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 修改地址对话框 -->
			<el-dialog title="修改地址" :visible.sync="addRessdialogVisible" width="50%">
				<!-- 表单验证 -->
				<el-form :model="addRessruleForm" :rules="addRessrules" ref="ruleForm" label-width="100px">
					<el-form-item label="省市区/县" prop="address1">
						<el-cascader v-model="addRessruleForm.address1" :options="cityData" :props="{ expandTrigger: 'hover' }"></el-cascader>
					</el-form-item>
					<el-form-item label="详细地址" prop="address2"><el-input v-model="addRessruleForm.address1" placeholder="请输入详细地址"></el-input></el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="addRessdialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addRessdialogVisible = false">确 定</el-button>
				</span>
			</el-dialog>

			<!-- 物流信息 -->
			<el-dialog title="物流进度" :visible.sync="progressVisible" width="50%">
				<el-timeline>
				    <el-timeline-item
				      v-for="(activity, index) in progressInfo"
				      :key="index"
				      :timestamp="activity.time">
				      {{activity.content}}
				    </el-timeline-item>
				</el-timeline>
			</el-dialog>

			<!-- 分页 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum"
				:page-sizes="[5, 10, 15]"
				:page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</el-card>
	</div>
</template>

<script>
import cityData from './citydata.js';

export default {
	data() {
		return {
			queryInfo: {
				//查询参数
				query: '',
				//当前页码
				pagenum: 1,
				//每页条数
				pagesize: 10
			},
			//保存总条数
			total: 0,
			//保存当前页的参数
			orderlist: [],
			//设置对话框的显示与隐藏
			addRessdialogVisible: false,
			//保存城市表单的数据
			addRessruleForm: {
				address1: [],
				address2: ''
			},
			//表单验证规则
			addRessrules: {
				address2: [{ required: true, message: '请填写详细地址', trigger: 'blur' }],
				address1: [{ required: true, message: '请选择省市区县', trigger: 'blur' }]
			},
			cityData,
			//设置物流对话框的打开与显示
			progressVisible:false,
			//保存获取到的物流信息
			progressInfo:[],
		};
	},
	created() {
		this.getOrderList();
	},
	methods: {
		async getOrderList() {
			const { data: res } = await this.$http.get(`orders`, { params: this.queryInfo });
			if (res.meta.status !== 200) return this.$message.error('获取数据失败');
			console.log(res.data);
			this.total = res.data.total;
			this.orderlist = res.data.goods;
		},
		handleSizeChange(newSize) {
			this.queryInfo.pagesize = newSize;
			this.getOrderList();
		},
		handleCurrentChange(newNum) {
			this.queryInfo.pagenum = newNum;
			this.getOrderList();
		},
		//点击打开修改地址对话框
		addRessClick() {
			this.addRessdialogVisible = true;
		},
		//物流信息地址对话框
		async progressClick(){
			const {data:res} = await this.$http.get("/kuaidi/1106975712662")
			
			if (res.meta.status !== 200) return this.$message.error("获取物流信息失败");
			
			this.progressInfo = res.data;
			this.progressVisible = true;
			
			console.log(this.progressInfo)
		}
	}
};
</script>

<style scoped="scoped" lang="less">
.el-cascader {
	width: 100%;
}
</style>
